<template>
  <div class="dashboard-container">
    <el-row :gutter="20">
      <el-col :span="19" style="min-width:500px">
<!--        <messages class="container-margin"/>-->
<!--        <div class="container-margin">-->
<!--          <guide/>-->
<!--        </div>  -->
        <div class="container-margin">
          <manage-status :totalData="totalData"/>
        </div>
        <div class="container-margin" style="display: flex">
          <div style="flex: 1; margin: 0 1% 0 0">
            <to-do :toDo="totalData.matter"/>
          </div>
          <div style="flex: 1; margin: 0 0 0 1%">
            <comm-menu/>
          </div>
        </div>
        <div class="container-margin" style="background-color: #fff;">
          <el-radio-group class="chart-type" v-model="lineType" size="mini">
            <el-radio-button label="按时"></el-radio-button>
            <el-radio-button label="按天"></el-radio-button>
          </el-radio-group>
          <line-chart :chartData="chartData"/>
        </div>
      </el-col>
      <el-col :span="5">
        <right :qCode="totalData.qcode"/>
      </el-col>
    </el-row>
  </div>
</template>

<script>
import { Messages, Guide, ManageStatus, ToDo, CommMenu, LineChart, Right } from './components'
import { getShopTotal } from '@/api/dashboard'

export default {
  name: 'Dashboard',
  components: {
    Messages,
    Guide,
    ManageStatus,
    ToDo,
    CommMenu,
    LineChart,
    Right
  },
  data() {
    return {
      totalData: {
        "today":{
          "today_turnover":0,
          "today_visitor":0,
          "today_order":"0",
          "today_average_price":0
        },
        "week":{
          "seven_day_turnover":0,
          "seven_day_visitor":0,
          "seven_day_order":"0",
          "seven_day_average_price":0
        },
        "month":{
          "thirty_days_turnover":0,
          "thirty_days_visitor":0,
          "thirty_days_order":"0",
          "thirty_days_average_price":0
        },
        "matter":{
          "un_shipped_order":"0",
          "refund_order":"0",
          "warehouse_order":"0"
        },
        "total_day":{
          "h":[1,2,3,4,5,6,7,8,9,10,11,12,13,14,15,16],
          "turnover":[0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0],
          "visitor":[0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0],
          "visit":[0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0]
        },
        "total_month":{
          "day":["2019-11-16","2019-11-17","2019-11-18","2019-11-19","2019-11-20","2019-11-21","2019-11-22","2019-11-23","2019-11-24","2019-11-25","2019-11-26","2019-11-27","2019-11-28","2019-11-29","2019-11-30","2019-12-01","2019-12-02","2019-12-03","2019-12-04","2019-12-05","2019-12-06","2019-12-07","2019-12-08","2019-12-09","2019-12-10","2019-12-11","2019-12-12","2019-12-13","2019-12-14","2019-12-15"],
          "turnover":[0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0],
          "visitor":[0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0],
          "visit":[0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0]
        },
        "qcode":"https://imgs.juanpao.com/qcode%2F2019%2F07%2F02%2Fwxe501e33f642dd63e.png"
      },
      lineType: '按天',
      chartData: {
        day: ["2019-11-16","2019-11-17","2019-11-18","2019-11-19","2019-11-20","2019-11-21","2019-11-22","2019-11-23","2019-11-24","2019-11-25","2019-11-26","2019-11-27","2019-11-28","2019-11-29","2019-11-30","2019-12-01","2019-12-02","2019-12-03","2019-12-04","2019-12-05","2019-12-06","2019-12-07","2019-12-08","2019-12-09","2019-12-10","2019-12-11","2019-12-12","2019-12-13","2019-12-14","2019-12-15"],
        visitor: [0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0],
        turnover: [0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0],
        visit: [0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0]
      }
    }
  },
  watch: {
    lineType(val) {
      if(val === '按天') {
        this.chartData = {
          day: this.totalData.total_month.day,
          visitor: this.totalData.total_month.visitor,
          turnover: this.totalData.total_month.turnover,
          visit: this.totalData.total_month.visit
        }
      }else{
        this.chartData = {
          day: this.totalData.total_day.h,
          visitor: this.totalData.total_day.visitor,
          turnover: this.totalData.total_day.turnover,
          visit: this.totalData.total_day.visit
        }
      }
    }
  },
  mounted() {
    this.getShopTotal();
  },
  methods: {
    getShopTotal() {
      const loading = this.$loading({
        lock: true,
        text: 'Loading',
        spinner: 'el-icon-loading',
        background: 'rgba(0, 0, 0, 0.7)'
      });
      getShopTotal({key: this.$store.state.app.activeApp.saa_key}).then(res => {
        if(res.status === 200) {
          this.totalData = res.data;
          this.chartData = {
            day: this.totalData.total_month.day,
            visitor: this.totalData.total_month.visitor,
            turnover: this.totalData.total_month.turnover,
            visit: this.totalData.total_month.visit
          }
          loading.close();
        }else{
          this.$messages.error(res.messages);
          loading.close();
        }
      })
      loading.close();
    }
  },
}
</script>

<style lang="scss" scoped>
.dashboard {
  &-container {
    margin: 30px;
  }
  &-text {
    font-size: 30px;
    line-height: 46px;
  }
}
</style>

<style lang="css" scoped>
.dashboard-container{
  /* padding: 3px 3px; */
}
.container-margin{
  margin-bottom: 25px;

}
.chart-type{
  position: relative;
  top: 20px;
  left: 85%;
}

</style>
